<template>
  <div class="wrap">
    <div class="item">
      <p class="name">请输入新手机号</p>
      <div class="box">
        <input type="text" v-model="tel" />
      </div>
    </div>
    <div class="item">
      <p class="name">请输入验证码</p>
      <div class="box">
        <input type="text" v-model="checkCode" style="width:140px;" />
        <span @click="sendCode">{{ts}}</span>
      </div>
    </div>
    <div class="item">
      <p class="name">输入登陆密码</p>
      <div class="box">
        <input type="password" v-model="password" />
      </div>
    </div>
    <p class="btn" @click="resetPass">确定修改</p>
    <span class="tss">更换手机号码后，下次登录可使用新手机号码登陆。当前手机号：{{phone}}；</span>
  </div>
</template>
<style lang="scss" scoped>
.tss {
  margin: 15px auto;
  display: block;
  text-align: left;
  width: 8.56rem;
  color: red;
}
.item {
  width: 8.56rem;

  margin: 0.8rem auto 0;
  .name {
    color: #555;
    font-size: 0.48rem;
    text-align: left;
    margin-bottom: 0.266667rem;
  }
  .box {
    background: #eeeded;
    height: 1.066667rem;
    border-radius: 0.266667rem;
    display: flex;
    width: 100%;
    align-items: center;
  }
  input {
    border: none;
    outline: none;
    height: 100%;
    background: transparent;
    margin-left: 20px;
    font-size: 0.4rem;
  }
  span {
    padding: 4px 8px;
    color: #fff;
    font-size: 0.32rem;
    background: #719bef;
    border-radius: 0.266667rem;
    margin-right: 15px;
    width: 140px;
    display: block;
  }
}
.btn {
  width: 8.56rem;
  height: 1.066667rem;
  margin: 60px auto 0;
  background: #719bef;
  color: #fff;
  font-size: 0.48rem;
  text-align: center;
  line-height: 1.066667rem;
  border-radius: 0.266667rem;
}
</style>
<script>
import {
  findUserInfo,
  sendCode,
  exist,
  updateAccount
} from "@/utils/interface";
import { Dialog } from "vant";

export default {
  data() {
    return {
      userInfo: null,
      phone: "",
      tel: "",
      checkCode: "",
      password: "",
      bok: true,
      ts: "向新手机发送验证码"
    };
  },
  methods: {
    // 个人信息
    findUserInfo() {
      findUserInfo().then(res => {
        console.log(res.data.data);
        this.userInfo = res.data.data;
        this.phone =
          this.userInfo.account.substr(0, 3) +
          "****" +
          this.userInfo.account.substr(7);
      });
    },
    // 发送验证码
    sendCode() {
      if (!/^1[3456789]\d{9}$/.test(this.tel)) {
        Dialog.alert({
          message: "手机号码有误，请重填"
        });

        return false;
      }
      exist({account:this.tel}).then(res=>{
        if (res.data.code == 200 && res.data.data == 0) {
          if (!this.bok) {
        return false;
      }
      this.bok = false;
      sendCode({
        account: this.tel
      }).then(res => {
        let n = 60;
        let timer = setInterval(() => {
          n--;
          this.ts = `${n}秒后重试`;
          if (n <= 0) {
            clearInterval(timer);
            this.ts = "重新获取";
            this.bok = true;
          }
        }, 1000);
      });
        } else {
          Dialog.alert({
            message: "该账号已经存在,请直接登陆"
          });
        }
      })
      
    },
    resetPass() {
      if (!/^1[3456789]\d{9}$/.test(this.tel)) {
        Dialog.alert({
          message: "手机号码有误，请重填"
        });
        return false;
      }
      if (!this.checkCode) {
        Dialog.alert({
          message: "请输入验证码"
        });
        return false;
      }
      if (!this.password) {
        Dialog.alert({
          message: "请输入密码"
        });
        return false;
      }
      if (this.password.length < 6) {
        Dialog.alert({
          message: "密码不能少于6位"
        });
        return false;
      }
      exist({ account: this.tel }).then(res => {
        if (res.data.code == 200 && res.data.data == 0) {
          updateAccount({
            tel: this.tel,
            password: this.password,
            checkCode: this.checkCode
          }).then(res => {
            if (res.data.code == 200) {
              Dialog.alert({
                message: "修改成功，请重新登陆"
              }).then(res => {
                localStorage.removeItem('shopwx')
                this.$router.replace("login");
              });
            }
          });
        } else {
          Dialog.alert({
            message: "该账号已经存在,请直接登陆"
          });
        }
      });
    }
  },
  created() {
    document.title="修改手机号"
    this.findUserInfo();
  }
};
</script>